<template>
    <div class="box" ref="wrapper">
        <div>
        <!-- 两个div 把内容包裹 -->
        </div>
        <template>
              <div class="zm">
                <p v-for="(val,key,idx) in cities" :key='idx' 
                  @touchstart="touchstartHander($event,idx)"
                  @touchmove="touchmoveHander($event,idx)"
                  @touchend="touchendHander($event,idx)">
                  {{key}}
                </p>
              </div>
        </template>
    </div>  
</template>


<script>
    //下载引用 
    import Bscroll from 'better-scroll'
    export default {
        name: 'cityPresent',
        data() {
            return {
                startindex: null,
                startY: 0,
                curindex: 0,
                scroll: {}
            }
        },
        methods: {
            touchstartHander: function(evt, idx) {
                //记录用户开始滑动时的位置 和索引
                this.startindex = idx;
                this.startY = evt.touches[0].clientY;
                //跳转到当前索引位置
                this.scroll.scrollToElement(this.$refs.alptitle[idx]);
            },
            touchmoveHander: function(evt, idx) {
                //滑动过程中根据手指的位置判断 手指所在的位置
                var cha = evt.touches[0].clientY - this.startY;
                if (cha > 0) {
                    //用户在向下滑动
                    var chaindex = Math.ceil(cha / 20);
                } else {
                    //用户在向上滑动
                    var chaindex = Math.floor(cha / 20);
                }
                //用户现在手指所处位置的索引值
                this.curindex = parseInt(this.startindex) + parseInt(chaindex);
                //跳转到当前索引位置
                this.scroll.scrollToElement(this.$refs.alptitle[this.curindex]);
            },
            touchendHander: function() {
            }
        },
        //挂在使用
        mounted() {
            this.scroll = new Bscroll(this.$refs.wrapper, {
                click: true
            })
        },
        props: ['hotCities', 'cities', ]
    }
</script>
<style scoped>
    ::-webkit-scrollbar {
        display: none;
    }
    .zm {
        position: fixed;
        top: 300px;
        right: 10px;
        ;
    }
    .zm {
        width: 30px;
    }
    .zm p {
        font-size: 28px;
        color: #43cadc;
        text-align: center;
        padding: 6px 0;
    }
</style>
